<@master template="master/master-loan" title="图形报表">



	<div style="height:100%;width:100%;overflow:hidden">
	 	<div id="mainProvince" style="width: 1000px;height:380px;" ></div>
	 	<div style="height:auto;width:90%;">
			<div id="mainCity" style="width: 500px;height:400px;float:left;" ></div>
			<div id="mainPlat" style="width: 500px;height:400px;float:left;" ></div>
		</div>
	</div>
	
	
<@js>
	
	 var provinceChart = echarts.init(document.getElementById('mainProvince'));
	 var cityChart = echarts.init(document.getElementById('mainCity'));	
	 var platChart = echarts.init(document.getElementById('mainPlat'));
	 
	 //通过所选市的余额数据列出市下所有平台的数据
	 function platByCity(param){
	 
			var cityName = param.name;
			var typeName = param.seriesName;
			
          	$.ajax({url:"restEcharts/platDetail",
           			data:{"cityName": cityName,"typeName":typeName},
           			dataType:"json",
           			type : 'post',
           			success:function(result){
           					platChart.showLoading();
				        	platChart.setOption({  
				              title: {  
				                  text: "'"+cityName+"'"+'下包含的平台的'+"'"+typeName+"'",  
				                  x: 'left',  
				                  y: 'top'  
				              },  
				              tooltip: {  
				                  trigger: 'item'  
				              },  
				              series: [  
				                  {  
				                      name: typeName,  
				                      type: 'pie',  
				                      data: eval(result.data)
				                     
				                  }
				              ]  
				          },true);
				          platChart.hideLoading();
             		}
             });
             
	}
		 
	 //通过所选省的余额数据列出省下所有市的数据	 
	 function cityByProvince(param){
	 
	 		platChart.clear();//清除上一次市下的平台数据
			var provinceName =param.name;
			var typeName=param.seriesName;
			
          	$.ajax({url:"restEcharts/cityDetail",
           			data:{"provinceName": provinceName,"typeName":typeName},
           			dataType:"json",
           			type : 'post',
           			success:function(result){
		           			cityChart.showLoading();
				        	cityChart.setOption({  
				              title: {  
				                  text: "'"+provinceName+"'"+'省包含的市的'+"'"+typeName+"'",  
				                  x: 'left',  
				                  y: 'top'  
				              },  
				              tooltip: {  
				                  trigger: 'item'  
				              },  
				              series: [  
				                  {  
				                      name: typeName,  
				                      type: 'pie',  
				                      data: eval(result.data)
				                     
				                  }
				              ]  
				          },true);
				         cityChart.hideLoading();
             		}
             });
		 }
   
		$(function(){
		    //名称数组  
		    var nameArray = new Array();  
		    //数据数组  
		    var dataArray1= new Array();  
		    var dataArray2= new Array();
		    var dataArray3= new Array();
		    var dataArray4= new Array();
		    var dataArray5= new Array();
		    var listSize = '${list?size}';  
		    
		    if(listSize != 0){
		    	<#list list as ls >
			    		nameArray.push('${ls[0]}');
		    		    dataArray1.push('${ls[1]}');
		    		    dataArray2.push('${ls[2]}');
		    		    dataArray3.push('${ls[3]}');
		    		    dataArray4.push('${ls[4]}');
		    		    dataArray5.push('${ls[5]}');
		    	</#list>
		    }
			provinceChart.showLoading();
	     	var option = {  
	                title: {  
	                    text: '按省区统计贷款余额',  
	                    link: 'http://report.o2osit.eascs.com/balance/provincePage?province=',  
	                    subtext: '备注：1.选择上方图标，可以按不同分类统计；2.点击柱状区域可查看各省下的明细（省-市-平台）', 
	                    subtextStyle:{color:'#aaa'},
	                    x: 'left',  
	                    y: 'top'  
	                },  
	                tooltip: {  
	                    trigger: 'axis'  
	                },  
	                legend: {  
	                    show: true,  
	                    x: 'center',  
	                    y: 'top',  
	                    data: ['放款金额','银行正常贷款余额','银行逾期贷款余额','代偿贷款金额','代偿贷款欠还余额']  
	                },  
	                toolbox: {  
	                    show: true,  
	                    feature: {  
	                        //辅助线标志  
	                        mark: {show: true},  
	                        //dataZoom，框选区域缩放，自动与存在的dataZoom控件同步，分别是启用，缩放后退  
	                        dataZoom: {  
	                            show: true,  
	                             title: {  
	                                dataZoom: '区域缩放',  
	                                dataZoomReset: '区域缩放后退'  
	                            }  
	                        },  
	                        //数据视图，打开数据视图，可设置更多属性,readOnly 默认数据视图为只读(即值为true)，可指定readOnly为false打开编辑功能  
	                        dataView: {show: true, readOnly: true},  
	                        //magicType，动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换  
	                        magicType: {show: true, type: ['line', 'bar']},  
	                        //restore，还原，复位原始图表  
	                        restore: {show: true},  
	                        //saveAsImage，保存图片（IE8-不支持）,图片类型默认为'png'  
	                        saveAsImage: {show: true}  
	                    }  
	                },  
	                calculable: true,  
	                xAxis: [  
	                    {  
	                        show: true,  
	                        type: 'category',  
	                        data: nameArray ,
	                        axisLabel: {
							    interval :0,
							    formatter:function(value)  
	                               {  
	                                   return value.split("").join("\n");  
	                               }  
							}
	                    }  
	                ],  
	                yAxis: [  
	                    {  
	                        show: true,  
	                        type: 'value',  
	                        splitArea: {show: true}  
	                    }  
	                ],  
	                  
	                series: [  
	                    {  
	                        name: '放款金额',  
	                        type: 'bar',  
	                        data: dataArray1,  
	                        markPoint: {  
	                            data: [  
	                                {type: 'max', name: '最大值'},  
	                                {type: 'min', name: '最小值'}  
	                            ]  
	                        },  
	                        markLine: {  
	                            data: [  
	                                {type: 'average', name: '平均值'}  
	                            ]  
	                        }  
	                    },  
	                    {  
	                        name: '银行正常贷款余额',  
	                        type: 'bar',  
	                        data: dataArray2
	                    } ,  
	                    {  
	                        name: '银行逾期贷款余额',  
	                        type: 'bar',  
	                        data: dataArray3
	                    }  ,  
	                    {  
	                        name: '代偿贷款金额',  
	                        type: 'bar',  
	                        data: dataArray4
	                    }  ,  
	                    {  
	                        name: '代偿贷款欠还余额',  
	                        type: 'bar',  
	                        data: dataArray5
	                    }   
	                ]  
	            };  
	        provinceChart.setOption(option);
	        provinceChart.hideLoading();
	});

	//通过点击省的余额数据，查询出所属市的余额数据
	provinceChart.on('click',cityByProvince);
	cityChart.on('click',platByCity);
	
	</@js>
</@master>
